<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js高级测试</title>
    <link rel="icon" href="image/head.ico" type="image/x-icon">
    <style>
        input {
            margin: 5px;
        }
    </style>
</head>
<body>
<!--复制和清空的实现-->
姓名:<input type="text" id="user1" placeholder="请输入用户名"><br/>
姓名:<input type="text" id="user2" placeholder="请输入用户名"><br/>
<button id="copy" onclick="one()" ondblclick="two()">单击复制双击清除</button>
<br/>
<script>
    function one() {
        document.getElementById("user2").value = document.getElementById("user1").value;
    }

    function two() {
        document.getElementById("user1").value = "";
        document.getElementById("user2").value = "";
    }
</script>
<!--失去焦点事件-->
用户名:<input type="text" placeholder="请输入用户名" id="two"><span id="message" style="color: red"></span><br/>
<script>
    /*onblur 失去焦点的事件*/
    document.getElementById("two").onblur = function () {
        if (this.value == "") {
            document.getElementById("message").innerText = "用户名不能为空";
        } else {
            document.getElementById("message").innerHTML = '<img src="image/gou2.png" height="20px" width="20px" ">'
        }
    }
</script>
<!--改变事件-->
城市:<select id="change">
    <!--默认选择             设置不可选择-->
    <option selected="selected" disabled="disabled">请选择城市</option>
    <option>广州</option>
    <option>东莞</option>
    <option>深圳</option>
</select><span id="chooseMessage" style="font-size: 10px"></span><br/>
<script>
    document.getElementById("change").onchange = function () {
        /*onchange事件改变改变的*/
        document.getElementById("chooseMessage").innerText = " 您选择的城市:" + this.value;
    }
</script>
<!--聚焦的改变-->
英文:<input type="text" id="english">
<script>
    document.getElementById("english").onblur = function () {
        /*变成大写的函数*/
        this.value = this.value.toUpperCase();
    }
</script>
</body>
</html>
